<template>
  <div id="app"></div>
</template>
          
<script>
import * as PIXI from "pixi.js";
export default {
  setup() {
    let app = new PIXI.Application({
      width: window.innerWidth,
      height: window.innerHeight,
      backgroundColor: "#fed6e3",
      resolution: window.devicePixelRatio || 1,
    });

    // 搞个背景图片
    let sprite = PIXI.Sprite.from(require("./assets/imgs/bg.png"));
    sprite.width = app.screen.width;
    sprite.height = app.screen.height;
    sprite.x = 0;
    sprite.y = 0;

    // 这个不重要，往下看你就知道这个精灵是干嘛的了
    let sprite2 = PIXI.Sprite.from(require('./assets/imgs/kq.png'));
    sprite2.width = 600;
    sprite2.height = 600;
    sprite2.position.x = 10;
    sprite2.position.y = 10;

    // 搞个文本，new PIXI.Text()第一个参数为文本内容，第二个参数为对象，里面包含文字的样式信息等
    let text = new PIXI.Text("Hello, world", {
      fontFamily: "Arial",
      fontSize: 100,
      fill: 0xff0000,
      align: "center",
    });
    // 设置锚点为自身的中心点，否则文本并不是完全居中
    text.anchor.set(0.5, 0.5);
    text.position.x = app.screen.width / 2;
    text.position.y = app.screen.height / 2;
    // 让背景图片在y轴上循环平移，到时你就知道炫酷在哪了
    app.ticker.add((delta)=>{
        sprite.position.y += delta;
        if(sprite.position.y>=app.screen.height/3){
            sprite.position.y = 0;
        }
    })

    // 通过精灵.mask的方式即可为图片设置遮罩，效果就相当于把文字的背景色替换为对应位置上的图片内容，还是挺好看的。注意千万不要把文字添加到app.stage里面。再告诉你个有趣的事情，精灵的遮罩可以不只是文字，也可以用普通的矩形、圆形、圆角矩形什么的来搞，甚至可以是别的精灵图，效果很有趣的。但是mask只能设置一次哦，不能重复赋值，否则后者会替换前者
    sprite.mask = text;
    // sprite.mask = sprite2;


    app.stage.addChild(sprite);
    // app.stage.addChild(sprite2);
    

    document.body.appendChild(app.view);
  },
};
</script>
          
    <style>
canvas {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}
</style>
          